<template>
	<el-dialog title="服务申请字段" :visible.sync="dialogVisible" width="800px" @close="handleClose"
		:close-on-click-modal="false" append-to-body="true">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>服务申请字段</span>
		</div>

		<div class="smp-search">
			<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form" :rules="rules">

				<el-row>
					<el-col :span="24">
						
						<el-col :span="12">
							<el-form-item label="序号:" prop="orderNumber">
								<el-input-number min="0" max="300" style="width: 100%;" v-model="form.orderNumber" placeholder="序号"></el-input-number>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="字段代码:" prop="fieldCode">
								<el-input v-model="form.fieldCode" placeholder="字段代码"></el-input>
							</el-form-item>
						</el-col>
				
						<el-col :span="12">
							<el-form-item label="字段名称:" prop="fieldName">
								<el-input v-model="form.fieldName" placeholder="字段名称"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="父节点:" prop="parentType">
								<el-input v-model="form.parentType" placeholder="父节点"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="节点类型:" prop="nodeType">
								<el-select v-model="form.nodeType" style="width: 100%" placeholder="节点类型">
									<el-option v-for="item in dict('SMP0017')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="12" v-if="form.nodeType == '01'">
							<el-form-item label="字段类型:" prop="fieldType">
								<el-select v-model="form.fieldType" style="width: 100%" placeholder="字段类型">
									<el-option v-for="item in dict('SMP0018')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="12" v-if="form.nodeType == '01'">
							<el-form-item label="长度:" prop="fieldLength">
								<el-input v-model="form.fieldLength" placeholder="长度"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="是否必输:" prop="fieldRequire">
								<el-select v-model="form.fieldRequire" style="width: 100%" placeholder="是否必输">
									<el-option v-for="item in dict('SMP0015')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						
						
						<el-col :span="12">
							<el-form-item label="报文结构:" prop="struct">
								<el-select v-model="form.struct" style="width: 100%" placeholder="报文结构">
									<el-option v-for="item in dict('SMP0019')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<!-- <el-col :span="12">
							<el-form-item label="输入/输出:" prop="inOut" >
								<el-select v-model="form.inOut" disabled style="width: 100%" placeholder="输入输出">
									<el-option v-for="item in dict('SMP0020')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						
						<el-col :span="24">
							<el-form-item label="字段描述:" prop="fieldEdsc">
								<el-input type="textarea" autosize :rows="2" v-model="form.fieldEdsc" placeholder="字段描述"></el-input>
							</el-form-item>
						</el-col>
				
					</el-col>
				</el-row>


			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" @click="onSubmit">确认</el-button>
<!-- 			<el-button size="mini" @click="reset">清空</el-button>
 -->			<el-button size="mini" @click="closeDialog">取消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	"use strict";
	import {addSystemInfo} from '@/api/service.js';

	export default {
		data() {
			var validatefieldLength = (rule, value, callback) => {
			       if (value === '' && this.form.fieldType == '01') {
			         callback(new Error('String类型字段长度不能为空'));
			       } else {
			         callback();
			       }
			     };
			return {
				index:0,
				type:'add',
				dialogVisible: false,
				disabled:false,
				form: {
					 orderNumber: '1',
					 fieldCode: '',
					 fieldName: '',
					 parentType: '',
					 nodeType: '',
					 fieldType: '',
					 fieldLength: '',
					 fieldRequire: '',
					 fieldEdsc: '',
					 struct: '',
					 inOut: '',
				},
				rules:{
					orderNumber: [{
						required: true,
						message: '请输入序号',
						trigger: 'blur'
					}],
					fieldCode: [{
						required: true,
						message: '请输入字段代码',
						trigger: 'blur'
					}],
					fieldName: [{
						required: true,
						message: '请输入字段名称',
						trigger: 'blur'
					}],
					nodeType: [{
						required: true,
						message: '请选择节点类型',
						trigger: 'blur'
					}],
					fieldType: [{
						required: true,
						message: '请选择字段类型',
						trigger: 'blur,change'
					}],
					fieldLength: [{ validator: validatefieldLength, trigger: 'blur' }],
					fieldRequire: [{
						required: true,
						message: '请输入是否必输',
						trigger: 'blur,change'
					}],
					struct: [{
						required: true,
						message: '请选择报文结构',
						trigger: 'blur,change'
					}],
					inOut: [{
						required: true,
						message: '请选择输入输出',
						trigger: 'blur,change'
					}],
				},
			};
		},



		methods: {
			
			fetchProtocal(queryString,cb){
			var protocals = [{value:"socket/xml"},{value:"http/json"},{value:"http/soap"},{value:"https/json"},{value:"定长"},{value:"分隔符"},{value:"其他"}];
				
				var protocals1 =
				protocals1  = queryString? protocals.filter(item=>{
					return item.value.indexOf(queryString);
				}):protocals;
				cb(protocals1);
			},





			onSubmit() {
				this.$refs["form"].validate(valid=>{
					if(valid){
						this.dialogVisible = false;
						let data = {};
						Object.assign(data,this.form);
						if(this.type=='add'){
							this.$emit('addApplyField',data);
						}else{
							this.$emit('updateApplyField',data,this.index);
						}
						this.$refs["form"].resetFields();
					}else{
						return false;
					}
				});
			},

			reset() {
				this.$refs["form"].resetFields();
			},

			
			showDialog(inOut) {
				this.form.inOut = inOut;
				this.type='add';
				this.disabled = false;
				this.dialogVisible = true;
			},
			
			showDialog2(row,index) {
				this.type='update';
				this.index = index;
				this.form = row;
				this.disabled = true;
				this.dialogVisible = true;
			
			},
			
			closeDialog() {
				this.$refs["form"].resetFields();
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			}


		},

	}
</script>

<style>
</style>
